<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model结合checkbox使用</title>
</head>
<script src="../js/vue.js"></script>
<body>

<div id="app">
    <p>checkbox的单选框</p>
    <label for="rule">
        <input type="checkbox" id="rule" v-model="agree">同意协议
    </label>
    <h2>{{agree}}</h2>
    <button :disabled="!agree">下一步</button>

    <p>checkbox的多选框</p>
    <input type="checkbox" value="读书" v-model="hobbits"/>读书
    <input type="checkbox" value="睡觉" v-model="hobbits"/>睡觉
    <input type="checkbox" value="吃饭" v-model="hobbits"/>吃饭
    <input type="checkbox" value="喝水" v-model="hobbits"/>喝水

    <h2>{{hobbits}}</h2>

    <label v-for="item in originHobbits" :for="item">
        <input type="checkbox" :value="item" :id="item" v-model="hobbits">{{item}}
    </label>
</div>

</body>

<script>
    const vue = new Vue({
        'el': '#app',
        'data': {
            agree: '',
            hobbits: [],
            originHobbits: ['a', 'b', 'c', 'd']
        },
        'methods': {}
    })
</script>
</html>